<template>
  <div>
    <basic-dialog
      :visible.sync="hrUserVisible"
      :handleClose="handleCloseDialog"
      :handleOpened="handleOpenedDialog"
      :title="'选择人员'"
      :show-footer="false"
      :width="'60%'"
    >
      <div class="form-container">
        <el-form ref="queryData" :inline="true" :model="queryData" @submit.native.prevent>
          <el-form-item label="人员姓名:" prop="userName">
            <el-input
              v-model="queryData.userName"
              placeholder="请输入人员姓名"
              @keyup.enter.native="handleQueryData(1)"
            ></el-input>
          </el-form-item>
          <el-form-item label="工号:" prop="jobNumber">
            <el-input
              v-model="queryData.jobNumber"
              placeholder="请输入工号"
              @keyup.enter.native="handleQueryData(1)"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQueryData(1)"
              >查询</el-button
            >
            <el-button @click="handleResetData">清空</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-tabs
        v-model="tabsStatus"
        @tab-click="handleClickTabs"
        style="margin: 10px"
      >
        <el-tab-pane
          label="未关联"
          name="notAssociated"
          :disabled="tabpaneDisabled"
        >
        </el-tab-pane>
        <el-tab-pane
          label="已关联"
          name="isAssociated"
          :disabled="tabpaneDisabled"
        >
        </el-tab-pane>
      </el-tabs>
      <BasicTable
        ref="basicTable"
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :pageSizes="pageSizes"
        :tableHeight="443"
        :showSelectCol="false"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      />
    </basic-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import BasicDialog from '@/components/BasicDialog';
import BasicTable from '@/components/supplier/BasicTable';
import { getBtnsId } from '@/libs/btnsPermission';
import { queryHrUserService } from '@api/supplier/returnVisteManage';
import { isResponseSuccess } from '@/pages/supplier/utils/bizUtils';

export default {
  name: 'HrUserDialog',
  components: {
    BasicDialog,
    BasicTable,
  },
  props: {
    // 是否供应商来访记录
    isVisit: {
      type: Boolean,
      default: false
    },
    hrUserVisible: {
      type: Boolean,
      default: false
    },
    personList: {
      type: Array,
      default: () => {
        return [];
      }
    },
  },
  data () {
    return {
      selectList: [],
      tabsStatus: 'notAssociated', // 当前tabs页签
      tabpaneDisabled: false, // tabs禁用状态
      queryData: {
        jobNumber: '', // 供应商名称
        userName: '', // 供应商代码
        excludeJobNumbers: [],
        includeJobNumbers: [],
      },
      pageSizes: [10, 20, 30, 40],
      pagination: {
        pageNum: 1,
        total: 0,
        pageSize: 10
      },
      tableInfo: {
        list: [],
        loading: false,
        columns: [
          {
            title: '姓名',
            key: 'userName',
            width: 90
          },
          {
            title: '工号',
            key: 'jobNumber',
          },
          {
            title: '职位',
            key: 'hrJobName',
          },
          {
            title: '联系电话',
            key: 'mobile',
          },
          {
            title: '所属区域',
            key: 'hrArea',
          },
          {
            title: '所属部门',
            key: 'companyName',
          },
          {
            title: '操作',
            fixed: 'right',
            render: (h, { row }) => {
              if (this.tabsStatus == 'notAssociated') {
                return <el-button size="mini" type="text" onClick={() => this.handleSelectSupplier(row)}>关联</el-button>
              }
              return <el-button size="mini" type="text" onClick={() => this.handleCancelSelect(row)}>取消关联</el-button>
            }
          }
        ],
      }
    };
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn'])
  },
  watch: {
    personList: {
      handler (val) {
        this.selectList = val;
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleClickTabs () {
      this.handleResetData();
      this.handleQueryData(1);
    },
    // 选择供应商
    handleSelectSupplier (row) {
      // this.selectList.push(row)
      this.$emit('handle-select', { row, type: 'select' });
      setTimeout(() => {
        this.handleQueryData()
      }, 100)
    },
    // 取消选择供应商
    handleCancelSelect (row) {
      // this.selectList = this.selectList.filter(item => item.jobNumber != row.jobNumber)
      this.$emit('handle-select', { row, type: 'cancel' });
      setTimeout(() => {
        this.handleQueryData()
      }, 100)
    },
    // 过滤用户账号id
    filterUserJobNum () {
      if (this.isVisit) {
        return this.selectList;
      }
      return this.selectList.map(item => item.jobNumber && item.jobNumber);
    },
    // 获取 表格数据
    handleQueryData (pageNum) {
      if (this.tabsStatus == 'notAssociated') {
        this.queryData.excludeJobNumbers = this.filterUserJobNum();
        this.queryData.includeJobNumbers = [];
      }
      if (this.tabsStatus == 'isAssociated') {
        this.queryData.excludeJobNumbers = [];
        this.queryData.includeJobNumbers = this.filterUserJobNum();
      }
      if (this.tabsStatus == 'isAssociated' && !this.selectList.length) {
        this.tableInfo.list = []
        return
      }
      if (pageNum) {
        this.pagination.pageNum = pageNum;
      }
      this.tabpaneDisabled = true;
      this.tableInfo.loading = true;
      sessionStorage.setItem('buttonId', getBtnsId('查询'));
      queryHrUserService({ ...this.queryData, ...this.pagination }).then(res => {
        this.tableInfo.loading = false;
        this.tabpaneDisabled = false;
        if (isResponseSuccess(res)) {
          const { result } = res;
          this.tableInfo.list = result.list;
          this.pagination.total = result.totalSize;
          this.reloadTableLayout()
        }
      }).catch(() => {
        this.tableInfo.loading = false;
        this.tabpaneDisabled = false;
      });
    },
    // 分页状态变更
    handlePageChange (pageNum) {
      this.pagination.pageNum = pageNum;
      this.handleQueryData();
    },
    // 分页状态变更
    handlePageSizeChange (pageSize) {
      this.pagination.pageSize = pageSize;
      this.handleQueryData(1);
    },
    // 重置查询条件
    handleResetData () {
      this.$refs['queryData'].resetFields();
    },
    // 关闭弹框
    handleCloseDialog () {
      this.handleResetData();
      this.$emit('update:hrUserVisible', false);
    },
    // 打开弹框
    handleOpenedDialog () {
      this.handleQueryData(1);
    },
    // 表格DOM重新渲染
    reloadTableLayout () {
      this.$nextTick(() => {
        this.$refs.basicTable.$refs.elTable.doLayout();
      });
    },
  }
};
</script>
<style scoped>
.form-container {
  margin-bottom: 10px;
}
</style>
